<!DOCTYPE html>
<html>
<head>
  <title>Javascript in JSX!</title>
  <script src="../build/react.js"></script>
  <script src="../build/react-dom.js"></script>
  <script src="../build/browser.min.js"></script>
</head>
<body>
  <div id="demo-orderedlist"></div>
  <div id="demo-unorderedlist"></div>
  <script type="text/babel">
    var labels = ['Chinese', 'Math', 'English', 'Biology'];
    ReactDOM.render(
      <ol>
        <li>Circulation in JSX</li>
        {
          labels.map(function (label) {
            return <li>This is {label} textbook!</li>
          })
        }
      </ol>,
      document.getElementById('demo-orderedlist')
    );
    var arr = [
      <li>An array of JSX.</li>,
      <li>Play games</li>,
      <li>Finish homework.</li>
    ];
    ReactDOM.render(
      <ul>
        {arr}
      </ul>,
      document.getElementById('demo-unorderedlist')
    );
  </script>
</body>
</html>